<template>
  <div class="inquire-header">
    <div class="input-list">
      <div class="gap-1 mb-4" style="align-items: center">
        <div class="list-name">停车场编号</div>
        <el-input v-model="input1" style="width: 240px" placeholder="请输入" />
      </div>
      <div class="gap-1 mb-4" style="align-items: center; margin-left: 115px">
        <div class="list-name">停车场名称</div>
        <el-input v-model="input2" style="width: 240px" placeholder="请输入" />
      </div>
      <div class="gap-1 mb-4" style="align-items: center; margin-left: 115px">
        <div class="list-name">停车场状态</div>
        <el-input v-model="input3" style="width: 240px" placeholder="请输入" />
      </div>
      <div class="gap-1 mb-4" style="align-items: center; margin-left: 115px">
        <div class="list-name">停车场单位</div>
        <el-input v-model="input4" style="width: 240px" placeholder="请输入" />
      </div>
    </div>
    <div flex>
      <div class="flex gap-1 mb-4" style="align-items: center">
        <div class="list-name" style="margin-right: 24px">所属</div>
        <el-radio-group v-model="radio1">
          <el-radio value="1" size="large">内部</el-radio>
          <el-radio value="2" size="large">外部</el-radio>
        </el-radio-group>
      </div>
      <div class="list-btn">
        <el-button class="btn-reset" @click="resetSearch" plain>重置</el-button>
        <!-- <div class="btn-reset" :class="{ active: activeBtn === 'search' }" @click="searchData">查询</div> -->
      </div>
    </div>
  </div>
  <div class="inquire-container">
    <div class="inquire-item-header">
      <div class="section">已有停车场</div>
      <div flex>
        <div class="flex gap-1 input-btn" @click="handleAdded">
          <el-icon><Plus /></el-icon>
          <span>新建</span>
        </div>
        <div class="flex gap-1 input-btn" @click="handleLead" style="margin-left: 10px">
          <el-icon><Download /></el-icon>
          <span>导入</span>
        </div>
      </div>
    </div>
    <div class="covered-table">
      <el-table
        :data="paginatedFilteredData"
        style="width: 100%"
        class="topsoil-tab"
        @selection-change="handleSelectionChange"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column type="selection" width="30" />
        <el-table-column prop="compile" label="停车场编号" align="center" />
        <el-table-column prop="name" label="停车场名称" align="center" />
        <el-table-column prop="type" label="停车场类型" align="center">
          <template v-slot="scope">
            <span>{{ scope.row.type === "1" ? "内部" : scope.row.type === "2" ? "外部" : "未知" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="parkNumber" label="停车位总数" align="center" />
        <el-table-column prop="remain" label="停车位剩余数" align="center" />
        <el-table-column prop="status" label="停车场状态" align="center">
          <template #default="scope">
            <div style="display: flex; align-items: center" flex justify-center>
              <!-- 根据状态显示不同颜色的圆点 -->
              <span
                :style="{
                  display: 'inline-block',
                  width: '7px',
                  height: '7px',
                  borderRadius: '50%',
                  backgroundColor: scope.row.status === '启动中' ? '#059669' : 'rgba(0,0,0,0.25)',
                  marginRight: '8px'
                }"
              />
              <span>{{ scope.row.status }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="unit" label="停车场单位" align="center" />
        <el-table-column prop="" label="操作" align="center">
          <template #default="scope">
            <el-button size="small" @click="handleDetails(scope.row)">详情</el-button>
            <el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
            <el-button size="small" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="demo-pagination-block">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[9, 18, 27]"
          :total="tableData.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <!-- 预览弹窗 -->
      <el-dialog v-model="dialogVisible" :title="dialogTitle" width="25%">
        <div v-if="dialogMode === 'details'" class="details-content" style="height: 400px">
          <!-- 详情内容展示 -->
          <div class="details-item">
            <div class="details-text">停车场名称</div>
            <div>{{ currentRow.name }}</div>
          </div>
          <div class="details-item">
            <div class="details-text">停车场类型</div>
            <div>{{ currentRow.type === "1" ? "内部" : currentRow.type === "2" ? "外部" : "未知" }}</div>
          </div>
          <div class="details-item">
            <div class="details-text">停车场总数</div>
            <div>{{ currentRow.parkNumber }}</div>
          </div>
          <div class="details-item">
            <div class="details-text">剩余停车位</div>
            <div>{{ currentRow.remain }}</div>
          </div>
          <div class="details-item" style="align-items: center">
            <div class="details-text">停车场单位</div>
            <el-switch
              v-model="currentRow.status"
              class="ml-2"
              style="--el-switch-on-color: #059669; --el-switch-off-color: #666"
            />
          </div>
          <div class="details-item">
            <div class="details-text">停车场位置</div>
            <div style="display: flex; align-items: center; color: #000">
              <el-icon><LocationFilled /></el-icon><span style="margin-left: 5px">当前位置</span>
            </div>
          </div>
          <div ref="mapDiv" class="map-container" pointer-events-initial />
        </div>
        <div v-if="dialogMode === 'edit'">
          <!-- 修改内容展示-->
          <el-form :model="currentRow" :rules="rules" ref="currentRowForm" label-width="auto" style="max-width: 600px">
            <el-form-item label="停车场编号">
              <el-input v-model="currentRow.compile" />
            </el-form-item>
            <el-form-item label="停车场名称">
              <el-input v-model="currentRow.name" />
            </el-form-item>
            <el-form-item label="停车场类型">
              <el-select v-model="currentRow.type" placeholder="Select" style="width: 240px">
                <el-option v-for="item in typeData" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="停车位总数">
              <el-input v-model="currentRow.parkNumber" />
            </el-form-item>
            <el-form-item label="剩余停车位">
              <el-input v-model="currentRow.remain" />
            </el-form-item>
            <el-form-item label="停车场状态">
              <el-switch
                v-model="currentRow.status"
                class="ml-2"
                style="--el-switch-on-color: #059669; --el-switch-off-color: #666"
              />
            </el-form-item>
            <el-form-item label="停车场单位">
              <el-select v-model="currentRow.text" placeholder="XXX工程单位" style="width: 240px">
                <el-option v-for="item in textData" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="停车场位置">
              <div
                style="
                  width: 82px;
                  height: 32px;
                  background: rgba(5, 150, 105, 0.15);
                  border-radius: 4px 4px 4px 4px;
                  text-align: center;
                  line-height: 32px;
                  cursor: pointer;
                  color: #059669;
                  margin-right: 5px;
                "
              >
                选择位置
              </div>
              <el-icon><LocationFilled /></el-icon>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="dialogMode === 'added'">
          <!-- 新增内容展示 (可替换为实际的表单) -->
          <el-form :model="currentRow" :rules="rules" ref="currentRowForm" label-width="auto" style="max-width: 600px">
            <el-form-item label="停车场编号">
              <el-input v-model="currentRow.compile" />
            </el-form-item>
            <el-form-item label="停车场名称">
              <el-input v-model="currentRow.name" />
            </el-form-item>
            <el-form-item label="停车场类型">
              <el-select v-model="currentRow.type" placeholder="内部" style="width: 240px">
                <el-option v-for="item in typeData" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="停车位总数">
              <el-input v-model="currentRow.parkNumber" />
            </el-form-item>
            <el-form-item label="剩余停车位">
              <el-input v-model="currentRow.remain" />
            </el-form-item>
            <el-form-item label="停车场状态">
              <el-switch
                v-model="currentRow.status"
                class="ml-2"
                style="--el-switch-on-color: #059669; --el-switch-off-color: #666"
              />
            </el-form-item>
            <el-form-item label="停车场单位">
              <el-select v-model="currentRow.text" placeholder="XXX工程单位" style="width: 240px">
                <el-option v-for="item in textData" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="停车场位置">
              <div
                style="
                  width: 82px;
                  height: 32px;
                  background: rgba(5, 150, 105, 0.15);
                  border-radius: 4px 4px 4px 4px;
                  text-align: center;
                  line-height: 32px;
                  cursor: pointer;
                  color: #059669;
                  margin-right: 5px;
                "
              >
                选择位置
              </div>
              <el-icon><LocationFilled /></el-icon>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <el-button v-if="dialogMode === 'edit' || dialogMode === 'added'" @click="dialogVisible = false"
            >取消</el-button
          >
          <el-button v-if="dialogMode === 'edit' || dialogMode === 'added'" @click="handleSave">确认</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, reactive, Ref, onMounted, nextTick } from "vue"
interface User {
  compile: string
  name: string
  type: string
  parkNumber: number
  remain: number
  status: string
  unit: string
}
const input1 = ref("")
const input2 = ref("")
const input3 = ref("")
const input4 = ref("")
const radio1 = ref("")
// 追踪激活的按钮
const activeBtn = ref<string>("")

// 重置查询
const resetSearch = () => {
  input1.value = ""
  input2.value = ""
  input3.value = ""
  input4.value = ""
  radio1.value = ""
  //   currentPage.value = 1
  activeBtn.value = "reset"
}
const tableData: Ref<User[]> = ref([
  {
    compile: "5850787683",
    name: "德华停车场",
    type: "1",
    parkNumber: 3000,
    remain: 335,
    status: "已停用",
    unit: "xxx工程单位"
  },
  {
    compile: "3127162905",
    name: "xxx停车场",
    type: "2",
    parkNumber: 2964,
    remain: 180,
    status: "启动中",
    unit: "xxx工程单位"
  },
  {
    compile: "52751375",
    name: "美东停车场",
    type: "1",
    parkNumber: 1998,
    remain: 198,
    status: "启动中",
    unit: "xxx工程单位"
  },
  {
    compile: "705160457",
    name: "xxx停车场",
    type: "2",
    parkNumber: 1655,
    remain: 235,
    status: "已停用",
    unit: "xxx工程单位"
  },
  {
    compile: "535158241",
    name: "xxx停车场",
    type: "1",
    parkNumber: 2568,
    remain: 356,
    status: "启动中",
    unit: "停车场工程单位"
  },
  {
    compile: "535158241",
    name: "xxx停车场",
    type: "1",
    parkNumber: 2568,
    remain: 356,
    status: "启动中",
    unit: "停车场工程单位"
  },
  {
    compile: "535158241",
    name: "xxx停车场",
    type: "2",
    parkNumber: 2568,
    remain: 356,
    status: "启动中",
    unit: "停车场工程单位"
  },
  {
    compile: "535158241",
    name: "xxx停车场",
    type: "1",
    parkNumber: 2568,
    remain: 356,
    status: "启动中",
    unit: "停车场工程单位"
  },
  {
    compile: "535158241",
    name: "xxx停车场",
    type: "2",
    parkNumber: 2568,
    remain: 356,
    status: "启动中",
    unit: "停车场工程单位"
  }
])
const typeData = [
  {
    value: "1",
    label: "内部"
  },
  {
    value: "2",
    label: "外部"
  }
]
const textData = [
  {
    value: "XXX工程单位",
    label: "XXX工程单位"
  },
  {
    value: "XXX工程单位2",
    label: "XXX工程单位2"
  }
]
const multipleSelection = ref<User[]>([])

const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

// 分页相关的状态
const currentPage = ref(1) // 当前页码
const pageSize = ref(9) // 每页显示条目数

// 根据输入框的内容筛选表格数据
const filteredData = computed(() => {
  const query = input1.value.trim().toLowerCase() // 将输入值转换为小写
  const num = input2.value.trim().toLowerCase() // 车牌号码
  const person = input3.value.trim().toLowerCase() // 围栏名称
  const unit = input4.value.trim().toLowerCase() // 单位名称
  const unitTypeValue = radio1.value // 单选框的值 (1为内部，2为外部)
  console.log(unitTypeValue)

  // 如果所有输入框和单选框都为空，返回全部数据
  if (!query && !num && !person && !unit && !unitTypeValue) {
    return tableData.value
  }

  return tableData.value.filter((item) => {
    // 检查每个条件，只有所有条件都匹配才会返回 true
    const matchesQuery = query ? String(item.compile).toLowerCase().includes(query) : true
    const matchesNum = num ? String(item.name).toLowerCase().includes(num) : true
    const matchesPerson = person ? String(item.status).toLowerCase().includes(person) : true
    const matchesUnit = unit ? String(item.unit).toLowerCase().includes(unit) : true
    const matchesUnitType = unitTypeValue ? item.type === unitTypeValue : true

    // 只有所有条件都匹配时，才返回该项
    return matchesQuery && matchesNum && matchesPerson && matchesUnit && matchesUnitType
  })
})
// 根据分页展示过滤后的数据
const paginatedFilteredData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredData.value.slice(start, end)
})
// 处理分页变化
const handleSizeChange = (newSize: number) => {
  pageSize.value = newSize
}
const handleCurrentChange = (newPage: number) => {
  currentPage.value = newPage
}

// 验证规则
const rules = reactive({
  name: [{ required: true, message: "公司服务名称不能为空", trigger: "blur" }],
  id: [{ required: true, message: "单位ID不能为空", trigger: "blur" }],
  person: [{ required: true, message: "单位负责人不能为空", trigger: "blur" }],
  date: [{ required: true, message: "添加时间不能为空", trigger: "blur" }],
  telephone: [{ required: true, message: "联系电话不能为空", trigger: "blur" }]
})
// 引用表单实例
const currentRowForm = ref(null)
const dialogVisible = ref(false) // 控制弹窗是否可见
const dialogTitle = ref("") // 弹窗标题
const dialogMode = ref("") // 弹窗模式，'details' 或 'edit'
const currentRow = ref<any>({}) // 当前选中的行数据
//点击新增按钮
const handleAdded = (row: any) => {
  currentRow.value = { ...row } // 深拷贝当前行的数据
  dialogMode.value = "added" // 设置弹窗模式为详情
  dialogTitle.value = "新增停车场" // 设置弹窗标题
  dialogVisible.value = true // 显示弹窗
}

//点击导入按钮
const handleLead = () => {
  console.log("导入数据")
}

// 点击详情按钮，显示详情弹窗
const handleDetails = (row: any) => {
  currentRow.value = { ...row } // 深拷贝当前行的数据
  dialogMode.value = "details" // 设置弹窗模式为详情
  dialogTitle.value = "停车场详情" // 设置弹窗标题
  dialogVisible.value = true // 显示弹窗
}

// 点击修改按钮，显示修改弹窗
const handleEdit = (row: any) => {
  currentRow.value = { ...row } // 深拷贝当前行的数据
  dialogMode.value = "edit" // 设置弹窗模式为修改
  dialogTitle.value = "停车场详情修改" // 设置弹窗标题
  dialogVisible.value = true // 显示弹窗
}

//点击删除，删除选中的行
const handleDelete = (row: User) => {
  console.log("删除选中的行", multipleSelection.value)
  // 实际业务中，这里应该调用接口删除选中的行
  const index = tableData.value.findIndex((item) => item.compile === row.compile)
  if (index !== -1) {
    tableData.value.splice(index, 1) // 删除数据
  }
}

// 保存操作
const handleSave = () => {
  // 不要将 currentRow.type 转换为 "内部" 或 "外部"
  // 保留 "1" 或 "2" 的原始值

  // 将 currentRow.status 的 true/false 转换为 '启动中' 或 '已停用'
  currentRow.value.status = currentRow.value.status ? "启动中" : "已停用"

  if (dialogMode.value === "added") {
    // 添加新数据
    tableData.value.push({
      ...currentRow.value,
      // 确保新数据有唯一的 ID
      id: `new-${Date.now()}`, // 或者使用其他生成 ID 的方法
      date: new Date().toISOString().slice(0, 19).replace("T", " ") // 当前时间
    })
  } else if (dialogMode.value === "edit") {
    // 修改现有数据
    const index = tableData.value.findIndex((item) => item.compile === currentRow.value.compile)
    if (index !== -1) {
      tableData.value[index] = { ...currentRow.value } // 更新数据
    }
  }

  dialogVisible.value = false // 关闭弹窗
}

// 地图相关
const onLoad = () => {
  // 确保地图容器存在
  const mapContainer = document.getElementById("mapDiv")
  if (!mapContainer) {
    console.error("Map container not found!")
    return
  }

  const map = new T.Map("mapDiv") // 创建地图实例
  map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12) // 设置中心点和缩放级别
}

onMounted(() => {
  nextTick(() => {
    onLoad() // 在 DOM 更新后调用初始化函数
  })
})
</script>

<style lang="scss" scoped>
@import "@/styles/global.scss";
.inquire-container {
  width: 100%;
  height: 91%;
  background: #ffffff;
  border-radius: 10px 10px 10px 10px;
  margin: 16px 0 20px 0;
  padding: 20px 23px;
  .inquire-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .section {
    font-family: AlibabaPuHuiTi20;
    font-weight: bold;
    font-size: 16px;
    color: #000000;
  }
  .input-btn {
    width: 82px;
    height: 32px;
    background: #059669;
    border-radius: 3px 3px 3px 3px;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    span {
      margin-left: 4px;
    }
  }
}
.covered-table {
  width: 100%;
  position: relative;
  .demo-pagination-block {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
  }
  .details-content {
    height: 330px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 10px;
    .details-item {
      display: flex;

      .details-text {
        width: 100px;
        text-align: right;
        margin-right: 15px;
      }
    }
    .map-container {
      width: 396px;
      height: 134px;
      border-radius: 6px 6px 6px 6px;
      background-color: #000;
      margin-left: 30px;
    }
  }
}
.inquire-header {
  width: 100%;
  height: 156px;
  background: #ffffff;
  border-radius: 10px 10px 10px 10px;
  border: 1px solid #e4e4e7;
  align-items: center;
  padding: 10px 23px;
  .input-list {
    display: flex;
    align-items: center;
    margin-top: 16px;
    .list-name {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85) !important;
      margin-bottom: 10px;
    }
  }
  .list-btn {
    // width: 140px;
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    cursor: pointer;
    margin-left: 165px;

    .btn-reset {
      width: 64px;
      height: 31px;
      border-radius: 3px 3px 3px 3px;
      border: 1px solid #d9d9d9;
      text-align: center;
      line-height: 31px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
    }
    .btn-reset:hover {
      background-color: #059669; // 激活状态背景颜色
      color: #fff; // 激活状态的字体颜色
    }

    .active {
      background-color: #059669; // 激活状态背景颜色
      color: #fff; // 激活状态的字体颜色
    }
  }
}
</style>
